<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>点名</title>
    <meta name="keywords" content="点名" />
    <meta name="description" content="点名" />
    <meta name="author" content="js代码(www.jsdaima.com)" />
    <meta name="copyright" content="js代码(www.jsdaima.com)" />
    <link href="css/main.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.rotate.min.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/elementui/index.css">
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="app">


    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            @closed="handleClose">
        <span>谁会是下一个幸运儿</span>
        <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false;handleClose">确 定</el-button>
            </span>
    </el-dialog>

    <div class="red_bag">
        <div class="cloud"></div>
        <div class="div red_bg_1 fix">
            <div class="dd" v-for="stu in students"  @click="bonus(stu,$event)">
                <div class="tt"><img src="images/red-bag/home_btn_hby_hb.png"></div>
            </div>

            <div class="fly">
                <!-- <div class="fly_1"><img src="images/red-bag/fly.png"></div> -->
            </div>
        </div>

    </div>
    <div class="fancy-overlay" style="display: none">
        <div class="pop-box" >
            <div><img src="images/red-bag/gx.png" style="opacity: 0.5"></div>
           <!-- <div><img :src="avatorImg"></div>-->
            <h5 style="color: red">获得5金币</h5>
            <button class="btn" @click="saveLog(0)">no</button>
            <button class="btn" @click="saveLog(1)">yes</button>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="js/jqfloat.js"></script>

<!-- 引入组件库 -->
<script src="js/vue.js"></script>
<script src="plugins/elementui/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/axios-interceptor.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="plugins/elementui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="plugins/elementui/lib/index.js"></script>

<script type="text/javascript">


    new Vue({
        el:"#app",
        data:{
            avatorImg:"",
            students:[

            ],
            dialogVisible:true
        },
        methods:{

            saveLog(isOk){
                let log = {};
                let stu = localStorage.getItem("stu");
                log.isOk = isOk;
                log.stuId = JSON.parse(stu).id;
                let _this = this;
                axios.post("/asklog",log).then(function (res) {
                    if(res.data.flag){
                        _this.$message.success("ok");
                    }
                });
            },
            handleClose(){
                $('.dd').hide();
                setTimeout(function(){$('.dd').show();},1000);
                $('.dd').jqFloat({
                    width: 1408,
                    height: 800,
                    speed: 4000,
                    minHeight: 50
                });


                $('.btn').click(function() {
                    $('.fancy-overlay').hide();
                });

                var angle = 0;
                setInterval(function() {
                    angle += 10;
                    $(".tt img").rotate(angle);
                }, 100);
                // var hh = setInterval(bb(),10000);
                function bb(){

                    $('.fly').prepend('<div class="fly_1"></div>');
                    $('.fly_1').prepend('<img src="images/red-bag/fly.png">');
                    // setTimeout(function(){
                    $('.fly_1').animate({
                            'left':-100,
                            'top': 100},
                        3000, function() {
                            $('.fly_1').remove();
                        });

                    // },100)

                };
                bb();
                var hh = setInterval(bb,15100);

            },
            findUser(){
                axios.get("/stu/list").then(
                    (res)=>{
                        this.students = res.data.data;
                    }
                );
            },
            bonus(stu,event){
                localStorage.setItem("stu",JSON.stringify(stu));
                var el = event.currentTarget;
                $(el).children('.tt').hide();
                $(el).css('backgroundImage','url(images/red-bag/hby_img_band.png)');
                //$(el).css('backgroundImage','url('+stu.avatorUrl+')');
                $('.pop-box').css('backgroundImage','url('+stu.avatorUrl+')');
                $('.pop-box').css('backgroundSize','cover');
                // this.avatorImg = stu.avatorUrl;
                setTimeout(function(){
                    $(el).hide();
                    $('.pop-box h5').text(stu.username);
                    $('.fancy-overlay').show();
                    },200);
            }
        },
        mounted(){
            this.findUser();
        }
    });
</script>

</html>
